<template>
	<view class="collect my-collect my-collect-index" style="width: 750rpx;position: relative;">
		<!-- 顶部导航栏 -->
		<view class="tab-bar flex-row" style="width: 750rpx;position: sticky;top: 0;
											  left: 0;z-index: 9999;
											  background-color: rgba(255, 255, 255, .7);
											  backdrop-filter: blur(15px);
											  -webkit-backdrop-filter: blur(15px);">
			<!-- 三个导航按钮 -->
			<view class="tab-bar-body flex-row-around" style="width: 650rpx;height: 30px;">
				<view :class="{'tab-bar-item': 1===1, 'tab-bar-item-active': tabStatus===1}" @click="tabChange(1)">
					产品收藏
				</view>
				<view :class="{'tab-bar-item': 1===1, 'tab-bar-item-active': tabStatus===2}" @click="tabChange(2)">
					内容收藏
				</view>
				<view :class="{'tab-bar-item': 1===1, 'tab-bar-item-active': tabStatus===3}" @click="tabChange(3)">
					全部
				</view>
			</view>
			<!-- 搜索按钮 -->
			<!-- <view class="tab-bar-search" style="width: 100rpx;height: 30px;">
				<view class="search-icon">
					<uni-icons
						type="search" 
						size="30"></uni-icons>
				</view>
			</view> -->
		</view>
		<!-- 加载动画 -->
		<view class="loading" style="position: relative; width: 750rpx;height: 100vh;text-align: center;" v-if="isLoading">
			<view class="text position-center" style="width: 750rpx;">
				{{ loadingTitle }}
			</view>
		</view>
		<!-- 设备产品 -->
		<view class="device-product product-body">
			<!-- 列表区域 -->
			<view class="product-list flex-row-graid" style="width: 100%;">
				<view v-for="item in productList" :key="item.advProductsId" @click="checkDetails(item.advProductsId)">
					<view class="product-list-item" style="width: 330rpx;height: 225px;margin-bottom: 15px;
														position: relative;box-shadow: 0 0 10px 0 #ccc;
														border-radius: 10px;overflow: hidden;">
						<!-- 大图 -->
						<view class="product-list-item-bigimg" style="width: 100%;height: 160px;">
							<image :src="baseUrl+item.productImage" style="width: 100%;height: 100%;"></image>
						</view>
						<!-- 产品信息 -->
						<view class="product-list-item-info">
							<view class="info-title flex-column-around" style="width: 100%;height: 40px;text-align: center;padding: 5px 0;box-sizing: border-box;">
								<text>{{ item.productName }}</text>
							</view>
							<view class="info-product" style="width: 100%;height: 20px;display: flex;
															  justify-content: start;align-items: center;line-height: 20px;">
								<text style="color: orangered;margin-left: 10px;">
									￥ {{ item.productPrice }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { GET_USER_INFO, BASE_IMAGE_URL } from '../../../utils/CommonValues.js'
	import request from '../../../utils/request';
	export default {
		data() {
			return {
				baseUrl: '',
				loadingTitle: '加载中...',
				isLoading: true,
				tabStatus: 1,
				productList:[] ,
				productType: 1, // 1 产品 2内容 3全部
				userInfo: {},
				advMembersId: '',
			}
		},
		onShow() {
			this.getList();
		},
		onLoad() {
			this.baseUrl = BASE_IMAGE_URL;
			GET_USER_INFO().then(response => {
				this.userInfo = response;
				this.advMembersId = response.advMembersId;
				this.getList();
			})
		},
		methods: {
			// 顶部导航栏状态改变
			tabChange(tabNum) {
				this.tabStatus = tabNum;
				this.productType = tabNum;
				this.getList();
			},
			// 获取数据
			getList() {
				this.isLoading = true;
				request.GET(`/system/products/findcollect/${this.advMembersId}/${this.productType}`)
					   .then(response =>{
						   console.log(response);
						   if(response.code == 200) {
							   this.productList = response.rows;
							   if(this.productList.length == 0) {
								   this.loadingTitle = '暂无收藏'
							   } else {
								   this.isLoading = false;
							   }
						   } else {
							   this.isLoading = '加载错误';
						   }
					   })
			},
			// 查看设备产品详情
			checkDetails(advProductsId) {
				uni.navigateTo({
					url: '/pages/product/productDetails/productDetails?id='+advProductsId
				})
			}
		}
	}
</script>

<style lang="less">
.tab-bar-item {
	position: ;
	width: 100%;
	line-height: 30px;
	text-align: center;
	width: 150rpx;
	box-sizing: border-box;
}
.tab-bar-item-active {
	color: skyblue;
	border-bottom: 2px solid skyblue;
}
.product-body {
	width: 750rpx;
	padding: 10px;
	box-sizing: border-box;
}
</style>
